<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SimMind Example</title>
    <!-- 引入Element UI的样式 -->
    <!-- 其他必要的样式或脚本 -->
    <link rel="stylesheet" href="simmind.css">
</head>
<body>
<div id="app">
    <sim-mind
            ref="test"
            :root.sync="root"
            :theme.sync="theme"
            @savedata="headleSaveData"

            :uploadImage="uploadImage"
            @savedata="mindmapsavedata"
            @addNode="mindAddNode"
            @editNode="mindEditNode"
            @removeNode="mindRemoveNode"
            @toolClick="mindHeadleCancel"
            @nodeclick="mindmapnodeclick"
            @rollback="mindrollback"
            @editShow="mindeditShow"
            @update="mindmapupdate"
            @dragend="minddragend"
            @cardEdit="mindCardEdit"
    />
</div>
<script src="https://wxserver.cards120.com/static/vue.js"></script>
<!-- 引入kity -->

<script src="simmind.umd.js"></script>
<script>
    // 确保 DOM 完全加载完成
    document.addEventListener('DOMContentLoaded', function() {


        new Vue({
            el: '#app',
            data() {
                return {
                    lockStatus: true,
                    theme: "",
                    root: {},
                };
            },
            methods: {
                mindCardEdit(e){
                    // 找到原始内容 e.node
                    console.log("mindCardEdit")
                    return;
                    var index = this.orderActivities.findIndex(a => {
                        let texttemp =  a.front.split("：").length > 1?a.front.split("：")[1]:a.front.split(":")[1]
                        return texttemp == e.card.node
                    })

                    this.card = this.orderActivities[index]
                    this.editCard()
                    this.mindMapUpdateNode = {node:e.node,data:e.card.node,id:e.card.id}

                },
                minddragend(e){

                    console.log("minddragend")
                    return;
                    console.log("minddragend事件传递")
                    console.log(e)
                    //获取需要修改的card
                    /**todo 每个节点的数据都不能一样不然就会混乱逻辑,修改使用id匹配解决这个问题。
                     * bug
                     * node1 '1'
                     * node3 '51'
                     *
                     * card变成node3了，后续操作就错了，换成 == 就ok了
                     */
                    var index = this.orderActivities.findIndex(a => a.id == e.data.id)
                    var card = this.orderActivities[index]
                    // 各种情况下不发送drag完成的请求，相对位置没改变，drag之后原来listsameLevelId=0和e.top为0表示首位，同层首位
                    // 左边和上边一样的话，这个位置就不变，就不进行后续操作

                    if(card.mindmapParentId == e.left &&card.mindmapSameLevelId == e.top){
                        console.log("相对位置没变，所有drag不生效,首位问题除外")
                        return
                    }

                    card.mindmapLayer = e.layer
                    if(e.layer!=0){

                        let leftIndex = this.orderActivities.findIndex(json => json.id==e.left)
                        card.mindmapParentId=this.orderActivities[leftIndex].id
                    }else{
                        card.mindmapParentId = 0
                    }

                    if(e.top==""){
                        // 表示是头节点，查询的时候刚开始就要插入，如果有两个头结点按照最新的插入
                        card.listSameLevelId=-1
                    }else{
                        let topIndex = this.orderActivities.findIndex(json => json.id==e.top)
                        card.mindmapSameLevelId=this.orderActivities[topIndex].id
                        card.listSameLevelId=0
                    }
                    // 更新这个card
                    this.editCard(card)
                    this.edit_save_card_ES_Only()
                    console.log(card)

                },
                mindeditShow:function(e){
                    console.log("mindeditShow")
                    return;
                    console.log("mindeditShow")
                    var self = this
                    // self.card.back=""
                    self.show=""


                },
                mindrollback:function(){
                    console.log("mindrollback")
                    return;
                    this.cancelMindShow=false
                    // console.log("全屏思维导图")
                    // this.fullScreen(document.getElementsByClassName('baidumind'))
                },
                //全屏
                fullScreen:function(el) {

                    console.log("fullScreen")
                    return;
                    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
                        wscript;

                    if(typeof rfs != "undefined" && rfs) {
                        rfs.call(el);
                        return;
                    }

                    if(typeof window.ActiveXObject != "undefined") {
                        wscript = new ActiveXObject("WScript.Shell");
                        if(wscript) {
                            wscript.SendKeys("{F11}");
                        }
                    }
                },

                //退出全屏
                exitFullScreen:function(el) {

                    console.log("exitFullScreen")
                    return;

                    var el= document,
                        cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
                        wscript;

                    if (typeof cfs != "undefined" && cfs) {
                        cfs.call(el);
                        return;
                    }

                    if (typeof window.ActiveXObject != "undefined") {
                        wscript = new ActiveXObject("WScript.Shell");
                        if (wscript != null) {
                            wscript.SendKeys("{F11}");
                        }
                    }
                },
                mindHeadleCancel:function(value){
                    console.log("mindHeadleCancel")
                    return;

                    console.log("cancel的时候顺便去掉思维导图的显示框")
                    this.cancelMindShow = false



                },
                // 更新事件监听mindEditNode mindRemoveNode 找到这个节点数据，然后再进行其他操作，去掉监控方式
                mindRemoveNode:function(value){
                    console.log("mindRemoveNode")
                    return;
                    // this.cancelMindShow = true

                    var self_ = this
                    console.log("节点删除")
                    console.log(value)
                    // 节点内容text修改


                    //



                    var orderIndex = self_.orderActivities.findIndex(json => json.id==value.id)
                    if(orderIndex!=-1){
                        self_.quickDelete(orderIndex)
                        self_.orderActivities.remove(orderIndex)
                    }

                },
                mindEditNode:function(value){

                    console.log("mindEditNode")
                    return;
                    var self_ = this
                    console.log("节点编辑")
                    if(value.dataAfter==value.dataPre){
                        return
                    }
                    console.log(value)

                    // 调用修改的代码     json.front.split("：").length > 1?json.front.split("：")[1]:json.front.split(":")[1] dataTotal.nodeData.id
                    var orderIndex = self_.orderActivities.findIndex(json => json.id==value.dataTotal.nodeData.id)
                    if(orderIndex!=-1){

                        self_.card = self_.orderActivities[orderIndex]
                        self_.floatEdit = value.dataAfter

                        self_.cardOprate.known = 0
                        self_.oriCardTag=self_.oprateTag(self_.card)
                        self_.cardOprate = JSON.parse(JSON.stringify(self_.card));
                        self_.cardOprate.tag = self_.oprateTag(self_.card)
                        self_.cardOprate.front = self_.floatEdit
                        self_.cardOprate.back= self_.show
                        self_.card.back= self_.show
                        // save之后order没有变导致的问题
                        self_.edit_save_card();
                        /**
                         * save之后进行重置 front和back过程
                         */



                    }else{
                        console.log("无此节点")
                    }

                },
                mindAddNode:function(e){
                    console.log("mindAddNode")
                    return;
                    var self = this
                    console.log("节点新增1")
                    console.log(e)

                    /**
                     * 这里tag使用思维导图的tag表示
                     */
                    self.cardOprate.tag = self.dynamicTags.join('-')
                    self.cardOprate.front = e.data
                    self.cardOprate.back = self.show
                    self.cardOprate.known = 0
                    self.cardOprate.eid = ""





                    self.cardOprate.mindmapLayer=e.layer
                    if(e.layer!=0){
                        let leftIndex = this.orderActivities.findIndex(json => json.id==e.left)
                        self.cardOprate.mindmapParentId=this.orderActivities[leftIndex].id

                    }else{
                        self.cardOprate.mindmapParentId = 0

                    }
                    /**
                     * 除了top不一样，别的都一样。
                     */
                    if(e.top==""){
                        // 表示是头节点，查询的时候刚开始就要插入，如果有两个头结点按照最新的插入
                        self.cardOprate.listSameLevelId=-1
                    }else{
                        let topIndex = this.orderActivities.findIndex(json => json.id==e.top)
                        self.cardOprate.mindmapSameLevelId=this.orderActivities[topIndex].id
                        self.cardOprate.listSameLevelId=0
                    }




                    // var createtime = this.formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
                    // var jsonActivity1 = {
                    //   'content':self.cardOprate.tag+':'+self.cardOprate.front,
                    //   'front':self.cardOprate.tag+':'+self.cardOprate.front,
                    //   'back':self.card.back,
                    //   'id':'',
                    //   'eid':'',
                    //   'icon':'',
                    //   'type':'',
                    //   'size':'',
                    //   'color':'',
                    //   'orderIndex':999,
                    //   'timestamp':createtime,
                    //   'lastmodifieddate':createtime
                    // }



                    self.CardPostSubmit(self.cardOprate)

                    //提交成功之后进行下一步的时候这时候进行更新操作
                    self.updateMindMapRoot(e.node.root.children,e.data)


                    // 添加成功之后将数据添加到activities中

                    // self.orderActivities.push(jsonActivity1)
                    // var objMind = JSON.parse(JSON.stringify(children))

                },
                mindmapupdate:function(value){
                    console.log("mindmapupdate")
                    return;
                    console.log("监听到点击update事件发生")
                    console.log(value)
                },

                // 点击保存按钮事件 // 递归保存变更层次的数据内容
                mindmapsavedata:function(value){
                    console.log("mindmapsavedata")
                    return;
                    var self = this
                    console.log("监听到点击savedate事件发生")
                    console.log(value)
                    var prepareListEditCard=[]
                    var extractFromMindMap = []
                    self.doLoop(extractFromMindMap,value.root.children,0,0)
                    // 递归实现记录层号和传递数据到下一层
                    self.orderActivities.map((a)=>{
                        var testjump = extractFromMindMap.forEach(b=>{
                            if(a.id==b.id){
                                if(a.mindmapLayer!=b.mindmapLayer||a.mindmapParentId!=b.mindmapParentId){
                                    prepareListEditCard.push(b)
                                }
                            }
                        })
                        console.log(testjump)
                    })
                    console.log(prepareListEditCard)
                    // prepareListEditCard.map((json)=>{updateMindMap()})

                    prepareListEditCard.forEach((c)=>{
                        let index = self.orderActivities.findIndex(json => json.id == c.id)
                        if(index!=-1){
                            self.orderActivities[index].mindmapLayer = c.mindmapLayer
                            self.orderActivities[index].mindmapParentId = c.mindmapParentId
                            self.editCard(self.orderActivities[index])
                            self.edit_save_card_ES_Only()
                        }
                    })
                },
                doLoop(extractFromMindMap,value,mindmapLayer,mindmapParentId){
                    var self = this
                    value.forEach((c)=>{
                        c.data.mindmapParentId = mindmapParentId
                        c.data.mindmapLayer = mindmapLayer
                        extractFromMindMap.push(c.data)
                        if(c.children.length>0){
                            self.doLoop(extractFromMindMap,c.children,mindmapLayer+1,c.data.id)
                        }
                    })
                },
// 点击节点事件
                mindmapnodeclick:function(value){
                    console.log("mindmapnodeclick")
                    return;
                    // this.cancelMindShow = true
                    var self_ = this
                    console.log("监听到点击node事件发生")
                    console.log(value.data.text)
                    // 找到点击的card并变成当前card
                    var orderIndex = self_.orderActivities.findIndex(json => json.id==value.data.id)
                    if(orderIndex!=-1){
                        this.card = this.orderActivities[orderIndex]
                    }
                    // this.timeline(value.data.text)
                    self_.show=this.card.back.replace(/<img /g,"<img preview style='object-fit:contain' ").replace(/https:\/\/gitee.com/gm,this.global_request_url.requestNodeLocal)
                },
                changeMindMap:function() {

                    this.mindMapShow= !this.mindMapShow
                    // 进行index提升和降落
                    if(this.mindMapShow){
                        this.simmindIndex = 0
                    }else{
                        this.simmindIndex = -1
                    }
                    this.btngroupShow=!this.btngroupShow

                },













                async headleSaveData() {
                    let data = await this.$refs.test.getNowView();
                    console.log(data);
                    console.log(this.$refs.test.getNowView);
                },
                uploadImage(e) {
                    // eslint-disable-next-line no-unused-vars
                    return new Promise((reslove, reject) => {
                        console.log(e);
                        setTimeout(
                            reslove(
                                "https://blog.xkongkeji.com/static/img/cover1.fb9e08c.jpg"
                            ),
                            3000
                        );
                    });
                },
            },
            async mounted() {
                this.root = {"data":{"text":"test测试"},"children":[{"data":{"id":7466,"back":"<p>3</p>","mindmapLayer":0,"mindmapParentId":0,"mindmapSameLevelId":7471,"listSameLevelId":-1,"text":"3"},"children":[{"data":{"id":7469,"back":"<p>66</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":-1,"text":"6 0"},"children":[]},{"data":{"id":7467,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"4"},"children":[]},{"data":{"id":7471,"back":"<p>8</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7469,"listSameLevelId":0,"text":"8"},"children":[{"data":{"id":7465,"back":"<p>222</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7468,"listSameLevelId":-1,"text":"2"},"children":[]},{"data":{"id":7464,"back":"<p>1</p>","mindmapLayer":2,"mindmapParentId":7471,"mindmapSameLevelId":7466,"listSameLevelId":-1,"text":"1"},"children":[]}]},{"data":{"id":7472,"back":"<p>9</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"9"},"children":[]},{"data":{"id":7470,"back":"<p>7</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7471,"listSameLevelId":0,"text":"7"},"children":[]},{"data":{"id":7468,"back":"<p>5</p>","mindmapLayer":1,"mindmapParentId":7466,"mindmapSameLevelId":7467,"listSameLevelId":0,"text":"51"},"children":[]}]}],"_updata":true};
                this.theme = "fresh-green-compat";
            } });
        })




    ;
</script>
</body>
</html>

<style lang="scss">
    * {
        margin: 0;
        padding: 0;
    }
    #app {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>